<template>
  <el-card type="border-card" class="blog-info">
    <el-tabs active-text-color="#3eaf7c" v-model="activeName" class="info-tabs" @tab-click="handleClick"
             :stretch="true">
      <el-tab-pane label="文章" name="first">
        <template #label>
          <el-tooltip content="文章" placement="top">
          <div class="tab-item"  ><span class="custom-tabs-label"><el-icon :size="25"><Tickets/></el-icon></span></div>
          </el-tooltip>
        </template>
        <BlogInfoPosts />
      </el-tab-pane>
      <el-tab-pane label="分类" name="second">
        <template #label>
          <el-tooltip content="分类" placement="top">
          <div class="tab-item"><span class="custom-tabs-label"><el-icon :size="25"><Folder/></el-icon></span></div>
          </el-tooltip>
        </template>
        <BlogInfoCategory />
      </el-tab-pane>
      <el-tab-pane label="标签" name="third">
        <template #label>
          <el-tooltip content="标签" placement="top">
            <div class="tab-item"><span class="custom-tabs-label"><el-icon :size="25"><PriceTag/></el-icon></span></div>
          </el-tooltip>
        </template>
        <BlogInfoTags />
      </el-tab-pane>
      <el-tab-pane label="时间轴" name="fourth">
        <template #label>
          <el-tooltip content="时间轴" placement="top">
          <div class="tab-item"><span class="custom-tabs-label"><el-icon :size="25"><Clock/></el-icon> </span></div>
          </el-tooltip>
        </template>
        施工中。。。
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import BlogInfoPosts from "@/components/home/blog-info/BlogInfoPosts.vue";
import BlogInfoTags from "@/components/home/blog-info/BlogInfoTags.vue";
import BlogInfoCategory from "@/components/home/blog-info/BlogInfoCategory.vue";
const activeName = ref('first')
</script>
<style scoped>
.blog-info {
  width: 330px;
  margin-top: 20px;
  height: 600px;
  margin-bottom: 100px;
}

.info-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.info-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}

.info-tabs /deep/ .el-tabs__item {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}

.tab-item {
  width: 40px;
  height: 40px;
  background: #ececec;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-tabs >>>.el-tabs__item.is-active {
color:#3eaf7c;
}
.info-tabs >>> .el-tabs__item.is-active:hover{
  color:#3eaf7c;
}
.info-tabs >>> .el-tabs__item:hover{
  color:#303133;
}
.info-tabs >>> .el-tabs__nav-wrap::after {
  background: #ffffff;
}
.info-tabs >>> .el-tabs__active-bar {
  opacity: 0;
}
</style>